<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0ea5e9">
    <title>豪华地产 - 户型对比</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- 户型对比页面 -->
    <div class="page bg-white h-full overflow-y-auto pb-24">
        <!-- 顶部导航栏 -->
        <div class="sticky top-0 bg-white z-10 p-4 border-b border-gray-100 flex justify-between items-center">
            <a href="floor-plan-list.html" class="text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </a>
            <h1 class="text-lg font-bold">户型对比</h1>
            <div class="w-5"></div>
        </div>
        
        <!-- 选择的户型卡片 -->
        <div class="px-4 py-4">
            <div class="overflow-x-auto scrollbar-hide">
                <div class="flex space-x-3 min-w-max">
                    <div class="w-40 relative">
                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                            <div class="relative">
                                <img src="https://img.zcool.cn/community/01e1r65dz2shda8012060id3w9.jpg" alt="精致三房" class="w-full h-24 object-cover">
                                <button class="absolute top-2 right-2 bg-black/40 rounded-full p-1 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                            <div class="p-3">
                                <div class="text-sm font-medium">精致三房</div>
                                <div class="text-xs text-gray-500">89㎡ | 三室两厅</div>
                            </div>
                        </div>
                    </div>
                    <div class="w-40 relative">
                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                            <div class="relative">
                                <img src="https://img.zcool.cn/community/01yutx5e2g66tra8012187fkwb.jpg" alt="豪华四房" class="w-full h-24 object-cover">
                                <button class="absolute top-2 right-2 bg-black/40 rounded-full p-1 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                            <div class="p-3">
                                <div class="text-sm font-medium">豪华四房</div>
                                <div class="text-xs text-gray-500">120㎡ | 四室两厅</div>
                            </div>
                        </div>
                    </div>
                    <div class="w-40 h-40 border border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center text-gray-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        <span class="text-xs mt-2">添加户型对比</span>
                        <span class="text-xs text-gray-400 mt-1">最多3个</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 对比详情 -->
        <div class="px-4 py-2">
            <!-- 基础信息对比 -->
            <div class="border-b border-gray-100 mb-4 pb-4">
                <h3 class="text-sm font-medium text-gray-500 mb-2">基础信息</h3>
                <div class="overflow-x-auto">
                    <table class="w-full min-w-max">
                        <thead>
                            <tr class="text-xs text-left text-gray-500 bg-gray-50">
                                <th class="p-2 w-24">参数</th>
                                <th class="p-2 w-40">精致三房</th>
                                <th class="p-2 w-40">豪华四房</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">户型</td>
                                <td class="p-2">三室两厅两卫</td>
                                <td class="p-2">四室两厅两卫</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">建筑面积</td>
                                <td class="p-2">89㎡</td>
                                <td class="p-2">120㎡</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">套内面积</td>
                                <td class="p-2">75㎡</td>
                                <td class="p-2">102㎡</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">得房率</td>
                                <td class="p-2">84%</td>
                                <td class="p-2">85%</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">朝向</td>
                                <td class="p-2">南北通透</td>
                                <td class="p-2">南北通透</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">层高</td>
                                <td class="p-2">2.9m</td>
                                <td class="p-2">3.0m</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">参考总价</td>
                                <td class="p-2 text-sky-500 font-medium">280-340万</td>
                                <td class="p-2 text-sky-500 font-medium">380-450万</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 空间对比 -->
            <div class="border-b border-gray-100 mb-4 pb-4">
                <h3 class="text-sm font-medium text-gray-500 mb-2">空间面积</h3>
                <div class="overflow-x-auto">
                    <table class="w-full min-w-max">
                        <thead>
                            <tr class="text-xs text-left text-gray-500 bg-gray-50">
                                <th class="p-2 w-24">空间</th>
                                <th class="p-2 w-40">精致三房</th>
                                <th class="p-2 w-40">豪华四房</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">客厅</td>
                                <td class="p-2">25㎡ (南向)</td>
                                <td class="p-2">32㎡ (南向)</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">主卧</td>
                                <td class="p-2">18㎡ (南向)</td>
                                <td class="p-2">20㎡ (南向)</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">次卧</td>
                                <td class="p-2">12㎡ (北向)</td>
                                <td class="p-2">14㎡ (北向)</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">儿童房</td>
                                <td class="p-2">-</td>
                                <td class="p-2">12㎡ (北向)</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">老人房</td>
                                <td class="p-2">10㎡ (北向)</td>
                                <td class="p-2">12㎡ (北向)</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">厨房</td>
                                <td class="p-2">8㎡ (东向)</td>
                                <td class="p-2">10㎡ (东向)</td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td class="p-2 text-xs text-gray-500">餐厅</td>
                                <td class="p-2">与客厅一体</td>
                                <td class="p-2">独立12㎡</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 户型亮点对比 -->
            <div class="border-b border-gray-100 mb-5 pb-4">
                <h3 class="text-sm font-medium text-gray-500 mb-2">户型亮点</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="text-sm font-medium mb-2">精致三房</div>
                        <ul class="text-xs text-gray-600 space-y-2">
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>主卧带独立卫浴，私密性好</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>南北通透，采光和通风效果好</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>厨房带阳台，方便晾晒</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                <span>无独立餐厅，空间利用受限</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                <span>没有儿童房，不适合多孩家庭</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="text-sm font-medium mb-2">豪华四房</div>
                        <ul class="text-xs text-gray-600 space-y-2">
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>四室设计，空间更加丰富</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>独立餐厅，提升就餐体验</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>层高3米，空间感更好</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>儿童房和老人房分开，更加适合三代同堂</span>
                            </li>
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500 mr-1 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                <span>总价较高，首付压力大</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部固定按钮 -->
        <div class="sticky bottom-16 left-0 right-0 bg-white border-t border-gray-100 shadow-md z-10 px-4 py-3 flex justify-between">
            <button class="flex-1 border border-gray-300 text-gray-700 rounded-full py-2 mr-2 font-medium text-sm">
                重置对比
            </button>
            <a href="appointment.html" class="flex-1 bg-gradient-to-r from-sky-500 to-blue-600 text-white rounded-full py-2 font-medium text-sm flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                预约看房
            </a>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20">
        <div class="grid grid-cols-5 h-16">
            <a href="index.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="property-list.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <span class="text-xs mt-1">楼盘列表</span>
            </a>
            <a href="floor-plan-list.html" class="flex flex-col items-center justify-center text-sky-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                </svg>
                <span class="text-xs mt-1">户型列表</span>
            </a>
            <a href="appointment.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span class="text-xs mt-1">预约看房</span>
            </a>
            <a href="#" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>
</body>
</html> 